<template>
  <el-container class="home_page_class">

    <el-header>
      <div style="height: 60px;line-height:60px;font-size: 20px;font-weight:bold; display: flex">
        <div style="margin-left: 18px;text-align: center;">智慧化电气火灾预警系统</div>
      </div>
      <div>
        <el-menu
            :default-active="$route.path"
            background-color="transparent"
            mode="horizontal"
            text-color="#b8c7ce"
            active-text-color="#ffffff"
            :collapse="isCollapse"
            router>
          <el-menu-item index="/home">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/originalDataList" v-show="userInfo.admin || userInfo.roles.indexOf('原始数据')>-1">
            <i class="el-icon-menu"></i>
            <span slot="title">原始数据</span>
          </el-menu-item>


          <el-submenu index="1" v-show="userInfo.admin || userInfo.roles.indexOf('⻛险趋势')>-1">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span>⻛险趋势</span>
            </template>
            <el-menu-item index="/rishTrendList">风险预测</el-menu-item>
            <el-menu-item index="/riskHistoryTrendList">历史趋势</el-menu-item>
            <el-menu-item index="/rishTrendReportList">导出风险趋势</el-menu-item>
          </el-submenu>

          <el-submenu index="2" v-show="userInfo.admin || userInfo.roles.indexOf('基础设置')>-1">
            <template slot="title">
              <i class="el-icon-s-help"></i>
              <span>基础设置</span>
            </template>
            <el-menu-item index="/riskReasonList" style="display: none">风险原因库</el-menu-item>
            <el-menu-item index="/detectorList">设备管理</el-menu-item>
            <el-menu-item index="/riskPositionList">风险点设置</el-menu-item>

            <el-menu-item index="/smsLogList">预警日志</el-menu-item>
          </el-submenu>
          <el-menu-item index="/managerList" v-show="userInfo.admin || userInfo.roles.indexOf('管理员')>-1">
            <i class="el-icon-user-solid"></i>
            <span slot="title">管理员</span>
          </el-menu-item>

        </el-menu>
      </div>
      <div style=" display: flex;font-size: 14px;color: #fff;align-items: center;">
        <div style="color: #fff;margin-right: 8px">当前登录：</div>

        <div style="color: #fff;margin-right: 20px;">
          <el-dropdown @command="handleCommand" menu-align="start" trigger="click">
            <div class="el-dropdown-link">


              <div style="display: inline-block;width: auto;vertical-align: middle;padding: 0 5px;">
                <p style=" color: #FFFFFF;line-height: 20px;text-align: center;font-size: 16px;cursor: pointer;display: block;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
                  {{ userInfo && userInfo.username }}</p>
              </div>
              <i class="el-icon-caret-bottom" style="color: #FFFFFF;font-size: 16px"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="commandHome">首页</el-dropdown-item>
              <el-dropdown-item command="commandAccountEdit">修改信息</el-dropdown-item>
              <el-dropdown-item command="commandPasswordEdit">修改密码</el-dropdown-item>
              <el-dropdown-item command="commandlogout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div
            style="height: 24px ;border-radius: 50px;background: #ffffff;padding: 0 12px;line-height: 22px;margin-right: 18px;cursor: pointer"
            @click="handleExit">
          <i class="el-icon-switch-button" style="color: red;font-size: 14px;font-weight: bold"></i>
          <span style="color: red;font-size: 12px;margin-left: 5px">退出</span>
        </div>
      </div>
    </el-header>
    <el-container style="overflow: auto !important;">

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!--编辑界面-->
    <el-dialog
        title="编辑"
        :visible.sync="editFormVisible"
        width="500px"
        :close-on-click-modal="false"
        center>
      <el-form :model="editForm" label-width="110px" :rules="editFormRules" ref="editForm">
        <el-form-item label="管理员名字" prop="name">
          <el-input v-model="editForm.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理员手机号" prop="template">
          <el-input v-model="editForm.tel" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading" style="margin-left: 48px">
          提交
        </el-button>
      </div>
    </el-dialog>
    <!--修改密码界面-->
    <el-dialog
        title="编辑"
        :visible.sync="editPasswordFormVisible"
        width="500px"
        :close-on-click-modal="false"
        center>
      <el-form
          :model="editPasswordForm"
          label-width="110px"
          :rules="editPasswordFormRules"
          ref="editPasswordForm"
      >
        <el-form-item label="旧密码" prop="password">
          <el-input v-model="editPasswordForm.password" placeholder="请输入旧密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="editPasswordForm.newPassword" placeholder="请输入新密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click.native="editPasswordFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editPasswordSubmit" :loading="editLoading"
                   style="margin-left: 48px">提交
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {mapGetters} from 'vuex'
import globalHelper from '../utils/globalHelper';

export default {
  name: "Home",
  data() {
    return {
      activeIndex: "/home",
      isCollapse: false,
      editFormVisible: false, //编辑信息界面数据
      editLoading: false,
      editForm: {
        name: "",
        tel: ""
      },
      editFormRules: {
        name: [
          {required: true, message: "请输入管理员名字", trigger: "blur"}
        ],
        tel: [
          {required: true, message: "请输入管理员手机号", trigger: "blur"}
        ]
      },
      editPasswordFormVisible: false, //编辑密码界面数据
      editPasswordForm: {
        password: "",
        newPassword: ""
      },
      editPasswordFormRules: {
        password: [
          {required: true, message: "请输入旧密码", trigger: "blur"}
        ],
        newPassword: [
          {required: true, message: "请输入新密码", trigger: "blur"}
        ]
      }
    };
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'menuList'
    ])
  },
  created() {
    //获取所有节点数据
    this.$store.dispatch('getRiskPositionListOptions', {page: 0, rows: 1000});
  },
  methods: {
    handleLefeMenu() {
      this.isCollapse = !this.isCollapse;
    },
    handleCommand(command) {
      if (command == "commandHome") {
        this.$router.push('/home');
      } else if (command == "commandAccountEdit") {
        this.editFormVisible = true;
        this.editForm.name = this.userInfo.name ? this.userInfo.name : '';
        this.editForm.tel = this.userInfo.tel ? this.userInfo.tel : '';
      } else if (command == "commandPasswordEdit") {
        this.editPasswordFormVisible = true;
      } else if (command == "commandlogout") {
        this.$store.dispatch('loginQuit');
        this.$message({
          showClose: true,
          type: 'success',
          message: '退出成功'
        });
        this.$router.push('/');
      }
    },
    handleExit: function () {
      this.$store.dispatch('loginQuit');
      this.$message({
        showClose: true,
        type: 'success',
        message: '退出成功'
      });
      this.$router.push('/');
    },
    editSubmit(e) {
      let self = this;
      globalHelper.formValidate(this, 'editForm').then((valid) => {
        if (valid) {
          self.$confirm('确认提交吗？', '提示', {}).then(() => {
            self.editLoading = true;
            self.$store.dispatch('updateAccount', Object.assign({}, this.editForm)).then((res) => {
              self.$message({
                type: 'success',
                message: '修改信息成功'
              });

              self.$refs['editForm'].resetFields();
              self.editFormVisible = false;
              self.editLoading = false;
            }).catch((error) => {
              self.editLoading = false;
            })
          });
        }
      })
    },
    editPasswordSubmit(e) {
      let self = this;
      globalHelper.formValidate(self, 'editPasswordForm').then((valid) => {
        if (valid) {
          self.$confirm('确认提交吗？', '提示', {}).then(() => {
            self.editLoading = true;
            self.$store.dispatch('updatePassword', Object.assign({}, this.editPasswordForm)).then((res) => {
              self.$message({
                type: 'success',
                message: '修改密码成功'
              });

              self.$refs['editPasswordForm'].resetFields();
              self.editPasswordFormVisible = false;
              self.editLoading = false;
            }).catch((error) => {
              self.editLoading = false;
            })
          });
        }
      })
    }
  }
};
</script>

<style scoped>
.home_page_class {
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/all_bg.png);
  background-size: 100% 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  transition: background .3s;
}

</style>
